<!DOCTYPE html>
<!-- 
	Testing file to verify silhouetteiframe.js.
	Must be installed and run off of a web server (http:...) 
	Won't work via file: due to cross-domain considerations. 
-->
<html dir="ltr">
    
	<head>
		<style type="text/css">
			body, html { 
				font-family:helvetica,arial,sans-serif; 
				font-size:90%;
				width:100%;
				height:100%;
				margin:0;
				padding:0;
			}
			.silhouette_table_container {
				width:100%;
				height:100%;
			}
			.silhouette_td_container {
				text-align:left;
				vertical-align:top;
			}
		</style>

		<script>
			// Stub AMD loader for silhouetteiframe.js
			define = function(deps, body){
				window.SilhouetteIframe = body();
			};
		</script>
		<script src="../silhouetteiframe.js" type="text/javascript"></script>
		<script>
			var iframefilename = '../test/pages/page1.html';
			var basepath="preview/";
			function getOrientation(){
				var orientationlist_elem = document.getElementById("orientationlist");
				var orientation = orientationlist_elem.options[orientationlist_elem.selectedIndex].value;
				return orientation;
			}
			function getScaleFactor(){
				var scalefactor_elem = document.getElementById("scalefactor");
				var scalefactor = scalefactor_elem.value-0;
				return scalefactor;
			}
			function onChangeDevice(devicelist_elem) {
				replaceSVG();
			}
			function onChangeOrientation(orientationlist_elem) {
				window.currentSilouetteWidget.setOrientation(getOrientation());
			}
			function onChangeScaleFactor(scalefactor_elem) {
				window.currentSilouetteWidget.setScaleFactor(getScaleFactor());
			}
			function replaceSVG(){
				var basepath='../images/';
				var devicelist_elem = document.getElementById("devicelist");
				var rootNode = document.querySelectorAll('.silhouette_div_container')[0];
				var svgfilename = basepath+devicelist_elem.options[devicelist_elem.selectedIndex].value;
				var orientation=getOrientation();
				var scalefactor=getScaleFactor();

				window.currentSilouetteWidget = new SilhouetteIframe({
					rootNode:rootNode,
					svgfilename:svgfilename,
					orientation:orientation,
					scalefactor:scalefactor
				});
			}
			function loadHandler() {
				var devicelist_elem = document.getElementById("devicelist");
				devicelist_elem.selectedIndex = 0;
				var orientationlist_elem = document.getElementById("orientationlist");
				orientationlist_elem.selectedIndex = 0;
				var scalefactor_elem = document.getElementById("scalefactor");
				scalefactor_elem.value = "1.0";
				replaceSVG();
			};
		</script>
	</head>
    
	<body class="claro" onload="loadHandler()">
		<table class="silhouette_table_container">
			<tr>
				<td style="width:1px;height:1px;">
					<div style="text-align:center;">
						<select id="devicelist" onchange="onChangeDevice(this)">
							<option>android_340x480.svg</option>
							<option>android_480x800.svg</option>
							<option>androidtablet.svg</option>
							<option>bbplaybook.svg</option>
							<option>blackberry.svg</option>
							<option>ipad.svg</option>
							<option>iphone.svg</option>
						</select>
						<select id="orientationlist" onchange="onChangeOrientation(this)">
							<option>portrait</option>
							<option>landscape</option>
						</select>
						<label for="scalefactor">Scale factor:</label>
						<input type="text" id="scalefactor" onchange="onChangeScaleFactor(this)"/>
					</div>
				</td>
			</tr>			
			<tr class="silhouette_tr_container">
				<td class="silhouette_td_container">
					<div class="silhouette_div_container">
						<span class="silhouetteiframe_object_container"></span>
						<iframe src="../test/pages/page1.html" class="silhouetteiframe_iframe"></iframe>
					</div>
				</td>
			</tr>
		</table>
	</body>

</html>